<template>
  <div class="container">
    <MarketHead v-show="type === 'market'" :data="data" />
    <PreviewHead v-show="type !== 'market' && type !== 'jump'" :data="data" />
    <Preview ref="preview" modalType="page" v-model="previewData" @valueChange="handleValueChange" />
    <MarketFoot v-show="type === 'market'" :id="id" :data="data" @update="handleUpdate"  />
  </div>
</template>

<script>
import { mapState } from "vuex"
import Preview from "../BoardEdit/LowCode/Preview"
import MarketFoot from "./MarketFoot"
import MarketHead from "./MarketHead"
import PreviewHead from "./PreviewHead"
import "../BoardEdit/LowCode/custom-components"
import { valid, getDashboardById } from "@/api/multidimensionalAnalysis"
import { parse } from "../BoardEdit/LowCode/lib/utils"


export default {
  components: {
    Preview,
    MarketFoot,
    MarketHead,
    PreviewHead
  },
  data() {
    return {
      data: {},
      id: -1,
      path: "",
      type: "preview", // market, jump, preview
      code: ""
      // previewData: {
      //   componentList: [],
      //   pageSetting: {}
      // }
    }
  },
  computed: {
    ...mapState("lowCode", {
      previewData: state => state.previewData
    })
  },
  created(){
    this.getQuery()

    // this.$refs["preview"].show()
    // console.log(componentList, pageSetting)
  },
  methods: {
    getQuery(){
      const {
        id,
        filter,
        type,
        code
      } = this.$route.query
      this.id = id
      this.filter = filter ? JSON.parse(decodeURIComponent(filter)) : {}
      this.type = type
      this.code = code
      this.$store.commit("lowCode/setJumpFilterData", this.filter)
      console.log(this.code)
      this.getData()
    },
    async getData(){
      if(this.code){
        try {
          await valid({code: this.code})
        } catch (error) {
          this.$message.error(error.response.data.message)
          return
        }
      }
      getDashboardById({id: this.id})
      .then(data => {
        if(data.errorCode === 0){
          console.log(data.data)
          this.data = data.data
          const {
            componentList,
            pageSetting
          } = JSON.parse(this.data.pageOperation || "{\"componentList\":[],\"pageSetting\":{}}")
          this.$store.commit("lowCode/setPreviewData", {componentList,pageSetting})
          this.$refs.preview.update()
          // this.previewData = {componentList,pageSetting}
        }
        else {
          this.$message.error(data.message)
        }

      })
    },
    handleValueChange(value){
      // this.previewData = value
      console.log(value)
      this.$store.commit("lowCode/setPreviewData", value)
    },
    handleUpdate(){
      this.getData()
    }
  },
  watch: {
    $route(to, from) {
      console.log(to.path === from.path && to.query.id !== from.query.id)
      this.id = to.query.id
      // if(to.path === from.path && to.query.id !== from.query.id){
      //   this.getQuery()
      // }
      if(to.path === from.path){
        this.getQuery()
      }
      if(to.params.type === "open"){
        this.getQuery()
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
